<template>
	<view class="item-box top">
		<view class="msg-title">
			<view>
				{{labelName}}/<view>共{{itemList.length}}项</view>
			</view>
			<view v-if="editType">
				<u-icon size="38" color="#000" name="plus-circle" @click="onOpenItem()"></u-icon>
			</view>
		</view>
		<view v-show="showType">
			<view v-for="(item,index) in itemList" :key="index">
				<listItem 
					:itemDetail="item" 
					:showClose="editType" 
					:labelList="labelList" 
					@deleteItem="onDeleteItem($event)"
					@getPartsNum="onNumChange"
				/>
			</view>					
		</view>
		<view class="shrink" @click="changeShowType()" v-if="itemList.length !== 0">
			{{!showType ? '打开' : '收起'}}
			<u-icon style="margin-left: 12upx;" :name="!showType ? 'arrow-down' : 'arrow-up'"></u-icon>
		</view>
	</view>
</template>

<script>
	import listItem from './listItem.vue';
	
	export default {
		components: {
			listItem
		},
		props: {
			editType: { type: Boolean, default: false },
			openType: { type: String, default: '' },
			deleteField: { type: String, default: '' },
			itemList: { type: Array, default: [] },
			labelList: { type: Array, default: [] },
			labelName: { type: String, default: '' }
		},
		data() {
			return {
				showType: true
			}
		},
		methods: {
			onOpenItem() {
				this.$emit('openItem', this.openType);
			},
			onDeleteItem(e) {
				const params = {
					item: e,
					arr: this.itemList,
					idName: this.deleteField
				}
				this.$emit('deleteItem', params);
			},
			changeShowType() {
				this.showType = !this.showType;
			},
			onNumChange(num) {
				this.$emit('getPartsNum', num);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box{
		width: 100%;
		background-color: #fff;
		padding: 0 16upx 16upx 16upx;
		border-radius: 10upx;
		.msg-title{
			height: 80upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 12upx;
			border-bottom: 1upx solid #D9D9D9;
			:first-child{
				display: flex;
				flex-direction: row;
			}
			:nth-child(2){
				margin-left: 12upx;
			}
		}
		.shrink{
			width: 100%;
			height: 80upx;
			border-top: 1px solid #F7F7F7;
			color: #999999;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
		}
	}
</style>
